<template>
    <div class="flex_col_start w100 h100">

        <Bar :data="item.info" :options="chartOptions" v-for="(item, index) in chartDatas" :key="index"
            style="min-height: 40%; max-height: 40%; background-color: #ccc;" />

    </div>
</template>

<script lang="ts" setup>
import { Bar } from 'vue-chartjs';
import { query_vote_info, updateFlag, type VoteInfo } from '@/service/api';
import { chartOptions } from '@/service/const';
import { ref, watch } from 'vue';

interface Data {
    label: string,
    data: number[],
    backgroundColor: string[]
}

interface ChartInfo {
    labels: string[],
    datasets: Data[],
}

interface CtxInfo {
    info: ChartInfo,
    vote: VoteInfo,
}

/*
const chartData = ref({
    labels: ['正方', '反方'],
    datasets: [
        {
            label: '正方票数',
            data: [0],
            backgroundColor: ['red'],
        },
    ],
});
*/

const chartDatas = ref<CtxInfo[]>([]);

async function init() {
    const vote_infos = await query_vote_info();
    const ctx: CtxInfo[] = [];
    for (const index in vote_infos) {
        const vote = vote_infos[index];
        const item: CtxInfo = {
            info: {
                labels: [`第${vote.vote_id}阶段正方`, `第${vote.vote_id}阶段反方`],
                datasets: [{
                    label: '',
                    data: [vote.pos, vote.neg],
                    backgroundColor: ['red', 'blue'],
                }]
            },
            vote: vote
        };
        ctx.push(item);
    }
    chartDatas.value = ctx;
}

init();

watch(updateFlag, () => {
    init();
});

</script>
